<template>
	<div class="bg-white rounded-[12px] boxShadow py-2">
		<div class="px-2 mb-2 text-sm text-primary">该安装点设备列表：</div>
		<div class="max-h-[220px] overflow-y-auto">
			<div
				v-for="item in list"
				:key="item.id"
				@click="handleClick(item)"
				class="px-2 mb-1 flex flex-nowrap text-xs cursor-pointer text-[#888] hover:text-primary"
			>
				<span class="whitespace-nowrap">{{ item.deviceModelName }}</span>
				<span class="pl-2 whitespace-nowrap">{{ item.imei }}</span>
				<span class="pl-1 whitespace-nowrap">{{ item.floorName }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="MarkerListLayer">
const emits = defineEmits(['close', 'handling']);
type MarkerItem = {
	id: string;
	imei: string;
	floorName: string;
	deviceModelName: string;
};
const props = defineProps({
	list: {
		type: Array<MarkerItem>,
		default: () => [],
	},
});
const handleClick = (item: any) => {
	emits('handling', item);
};
</script>

<style lang="scss" scoped></style>
